import React from 'react'
import './notemsg.css'
import { NavLink } from 'react-router-dom';
import { Input } from 'element-react'
// import 'element-theme-default'

class Notemsg extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            usermsg:'',
            iflike: 0,
        }
    }
    componentDidMount(){
        let url = 'http://62.234.30.197:8088/userlist/cha';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    userid: this.props.location.state.item.userid
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
            .then(res => res.json())
            .then(res => this.setState({
                usermsg: res[0]
            }))
<<<<<<< HEAD
            // .then(res=>//console.log(this.state.usermsg))
=======
            // .then(res=>console.log(this.state.usermsg))
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
        
        this.setState({
            iflike: this.props.location.state.iflike
        })
    }
    render() {
        const likeCount = (topid, useid) => {
            let url = 'http://154.8.202.56:8081/articlelist/topicsgai';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    topicsid: topid,
                    userid: useid
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
        }
<<<<<<< HEAD
        // //console.log(this.props.location.state.item);
=======
        // console.log(this.props.location.state.item);
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
        let item = this.props.location.state.item;
        return (
            <div className="body_div">
                <button onClick={() => this.props.history.goBack()} className="top_button">&lt;</button>
                <p className="xiangqing_p">
                    详情
                </p>
                <div className="book_div">
                    <img src={item.pic} alt="" />
                    {/* <div className="bookmsg_p"> */}
                    <div className={`${item.bookname == '' ? 'displayDiv' : 'bookmsg_p'}`}>
                        <p className="tuijian_p">推荐书籍：</p>
                        <p>{`《${item.bookname}》`}</p>
                        <a src={item.bookurl}>&gt;&gt;点此查看书籍</a>
                    </div>
                </div>
                <div className="user_div">
                    <NavLink to={{pathname:'/Personal', state: {item:this.state.usermsg}}}>
                        <img src={this.state.usermsg.pic} alt="用户头像" 
                            // onClick={()=>{
                            //     this.props.history.push('/Personal');
                            // }}
                        />
                    </NavLink>
                </div>
                <div className="txt_div">
                    <p className="txt_p">
                        {item.txt}
                    </p>
                </div>
                
                <p className="sma_p">文&nbsp;/&nbsp;{this.state.usermsg.userid == 0 ? "佚名" : this.state.usermsg.name}</p>
                <div className="bottom_div">
                    <Input placeholder="写一句评论..." style={{
                        width: '60%',
                        float: 'left',
                        marginTop: '8px',
                        marginLeft: '5%'
                    }}/>
                    <div className="i_div">
                        {/* <i className={`iconfont ${this.state.starclass[idx] == 0?"iconicon-xin":"iconicon-hongxin"}`}onClick={(e) => { */}
                        <i className={`iconfont ${this.state.iflike == 0?"iconicon-xin":"iconicon-hongxin"}`}onClick={(e) => {
                            e.stopPropagation();
                            e.nativeEvent.stopImmediatePropagation();
                            e.preventDefault();
<<<<<<< HEAD
                            //console.log(this.state.iflike)
=======
                            console.log(this.state.iflike)
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
                            if(this.state.iflike == 0) {
                                likeCount(item.topicsid, localStorage.getItem("userid"));
                                item.likecount += 1;
                                this.setState({
                                    iflike: 1
                                });
                            }
                                                // else{
                                                //     item.likecount -= 1;
                                                //     let arr = this.state.starclass
                                                //     arr[idx] = 0;
                                                //     this.setState({
                                                //         starclass: arr
                                                //     });
                                                // }
                            }}
                        ></i>
                        &nbsp;{item.likecount}&nbsp;&nbsp;
                        <i className="iconfont iconicon-zhunfa"></i>
                    </div>
                </div>
            </div>
        )
    }
}

export default Notemsg



